<template>
    <div>
        <el-form ref="formConf.elForm" 
                 :size="formConf.size" :label-width="formConf.labelWidth + 'px'"
                 :model="formData"
                 :rules="formConf.rules" :disabled="formConf.disabled">
            <el-form-item v-for="(item,index) in componentList" 
                          :key="index" 
                          :label="item.__config__.label"
                          :required="item.__config__required">
                <render :conf="item" @input="handleInput($event,item)"></render>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { formConf, componentList } from './config'
import render from './render/render.js'
    export default {
        name: 'PluginForm',
        data() {
            return {
                formConf,
                componentList,
                formData: {}
            }
        },
        components: {
            render
        },
        mounted() {
            this.componentList.forEach((item,index)=>{
                item.__vModel__ = 'field' + index
            })
        },
        methods: {
            handleInput(e,item) {
                console.log(e);
                // item.__config__['defaultValue'] = e
                const config = item.__config__;
                this.$set(config,'defaultValue',e)
            },
        },
    }
</script>

<style lang="scss" scoped>
